<template>
	<view class="header-bg-image header-bg">
		<view style="height: 50rpx;"></view>
		<view class="padding-30">
			<view class="margin-30-0 flex-center">
				<view class="fontSize-18 color-000 flex1 text-center">核销</view>
			</view>
			<!-- 列表 -->
			<view class="flex-boderRadius-view bg-fff padding-20 margin-bottom20">
				<view class="flex-alignItems-center margin-bottom20">
					<image class="img-160 margin-right20 border-radius10" :src="couponDetail.goods.image" mode="widthFix">
					</image>
					<view class="flex1 flex-column">
						<view class="flex-between margin-bottom20">
							<view class="fontSize-16 color-000">{{couponDetail.goods.title}}</view>
							<view class="fontSize-15 color-FE3232">{{couponDetail.status_text}}</view>
						</view>
						<view class="flex-between">
							<view class="fontSize-13 color-FE3232">￥<text
									class="fontSize-16">{{couponDetail.goods.price}}</text></view>
							<!-- <view class="fontSize-13 color-999">{{num}}</view> -->
							<!-- <u-number-box v-model=""></u-number-box> -->
						</view>
					</view>
				</view>
			</view>
			
			<!-- 确认核销按钮 -->
			<view class="margin-top150">
				<view class="btn-967C5E-15ffffff flex-center" @click="courseConfirm">
					确认核销
				</view>
			</view>
			
			<u-popup :show="insufficientPointsShow"  bgColor="#F6F3E8" @close="insufficientPointsShow = false" mode="center" round="20">
				<view class="insufficien-popup-view flex-justAliCenter-column">
					<image class="img-160 margin-30-0" src="../../static/image/14.png" mode=""></image>
					<view class="fontSize-18 fontWeight-bold color-704234 text-center">核销成功</view>
					<!-- <view class="flex-alignItems-center">
						<view class="insufficient-popup-btn flex-center margin-right20"
						@click="insufficientPointsShow = false">取消支付</view>
						<view class="insufficient-popup-btn1 flex-center">微信支付</view>
					</view> -->
					<view class="flex-center close-popup-view">
						<u-icon name="close-circle" color="#ffffff" size="28" @click="insufficientPointsShow = false"></u-icon>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				insufficientPointsShow:false,
				id:'',
				couponDetail: {}
			}
		},
		onLoad() {
			this.scan()
		},
		methods:{
			// 核销
			async courseConfirm(){
				let arr = []
				arr.push(this.couponDetail.code)
				let res = await this.$http.post(this.$api.coupon_sure, {
					code: arr
				}, {
					token: true
				})
				
				if(res.code == 1){
					this.insufficientPointsShow = true
				}
			},
			// 扫码获取商品id
			scan() {
				let that = this
				uni.scanCode({
					scanType: ['barCode','qrCode'],
					success: res => {
						console.log(res)
					   that.id = res.result
					   that.getCourseDetail()
					}
				})
			},
			// 获取课程详情
			async getCourseDetail(id) {
				let res = await this.$http.post(this.$api.coupon_detail, {
					id: this.id
				}, {
					token: true
				})
				if (res.code == 1) {
					this.couponDetail = res.data
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.close-popup-view{
		position: absolute;
		bottom: -180rpx;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.insufficient-popup-btn1{
		width: 200rpx;
		height: 70rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		background: #967C5E;
		border-radius: 45rpx 45rpx 45rpx 45rpx;
	}
	.insufficient-popup-btn{
		width: 200rpx;
		height: 70rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #755F47;
		background: rgba(150,124,94,0.14);
		border-radius: 45rpx 45rpx 45rpx 45rpx;
		border: 1rpx solid #967C5E;
	}
	.insufficien-popup-view{
		width: 500rpx;
		padding: 30rpx;
		border-radius: 20rpx;
		position: relative;
	}
	.goods-info-tag {
		padding: 5rpx 10rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #947065;
		background: rgba(148, 112, 101, 0.14);
		border-radius: 20rpx;
		border: 1rpx solid #967C5E;
		margin: 0 20rpx 20rpx 0;
	}

	.class-item {
		// display: flex;
		// align-items: center;
		// border: 1rpx solid #967C5E;
		padding: 20rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		margin-bottom: 30rpx;
	}
</style>